import React, { useState, useEffect } from 'react';
import { Table, message, Row, Col, Progress } from 'antd';
// import { history } from 'umi';
import moment from 'moment/moment';
// import { TaskSteps } from '../../../../components';
import { getCycles } from '../../../../services/task';
import { TaskOperateType, toNum } from '../../../../utils';
import ExecuteSteps from '../ExecuteSteps';

import styles from '../../MyExecuteDetail.less';
import {
    showPressInfoModal,
    showProgressInfoModal,
    showDelayInfoModal,
    showAuditRefuseInfoModal,
    showBackInfoModal,
    showTransferInfoModal,
    showAcceptanceFailedInfoModal,
    showTurnDoingInfoModal,
    showChangeInfoModal,
    showTurnFinishInfoModal,
    showPauseInfoModal,
    showCancelInfoModal
} from '../../../containers/MyTaskInfoModal';

const ExecutionCycle = ({ location, activeKey, refreshComp }) => {
    const { query: urlQuery } = location;

    const [loading, setLoading] = useState(false);
    const [recordList, setRecordList] = useState([]);
    const [stepObj, setStepObj] = useState(null);
    const renderProgress = (text = '0') => {
        let format = {};
        if (toNum(text) >= 100) {
            format = {
                format: () => '100%'
            };
        }
        return (
            <Progress
                className={styles.taskProgress}
                percent={Number(text)}
                strokeColor="#999999"
                size="small"
                {...format}
            />
        );
    };
    const MODALS = {
        // 变更
        [TaskOperateType.CHANGE]: (id, operateRecordId) => showChangeInfoModal(id, operateRecordId),
        // 催办
        [TaskOperateType.PRESS]: (id, operateRecordId) => showPressInfoModal(id, operateRecordId),
        // 审核不通过
        [TaskOperateType.AUDIT_REFUSE]: (id, operateRecordId) => showAuditRefuseInfoModal(id, operateRecordId),
        // 填写进度
        [TaskOperateType.WRITE_PROGRESS]: (id, operateRecordId) => showProgressInfoModal(id, operateRecordId),
        // 转进行中
        [TaskOperateType.TURN_DOING]: (id, operateRecordId) => showTurnDoingInfoModal(id, operateRecordId),
        // 延期
        [TaskOperateType.DELAY]: (id, operateRecordId) => showDelayInfoModal(id, operateRecordId),
        // 退回
        [TaskOperateType.BACK]: (id, operateRecordId) => showBackInfoModal(id, operateRecordId),
        // 转派
        [TaskOperateType.TRANSFER]: (id, operateRecordId) => showTransferInfoModal(id, operateRecordId),
        // 验收不通过
        [TaskOperateType.ACCEPTANCE_FAILED]: (id, operateRecordId) =>
            showAcceptanceFailedInfoModal(id, operateRecordId),
        // 转已完成
        [TaskOperateType.TURN_FINISH]: (id, operateRecordId) => showTurnFinishInfoModal(id, operateRecordId),
        // 暂停
        [TaskOperateType.PAUSE]: (id, operateRecordId) => showPauseInfoModal(id, operateRecordId),
        // 取消
        [TaskOperateType.CANCEL]: (id, operateRecordId) => showCancelInfoModal(id, operateRecordId)
    };

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render(text, record, index) {
                return index + 1;
            }
        },
        {
            title: '操作人',
            dataIndex: 'operateEmployeeName',
            key: 'operateEmployeeName'
        },
        {
            title: '操作项',
            dataIndex: 'operateName',
            key: 'operateName'
        },
        {
            title: '操作时间',
            dataIndex: 'operateTime',
            key: 'operateTime',
            render: (text, record) => <span>{moment(record.operateTime).format('YYYY-MM-DD HH:mm')}</span>
        },
        {
            title: '进度',
            dataIndex: 'taskProgress',
            key: 'taskProgress',
            width: 150,
            render: text => renderProgress(text)
        },
        {
            title: '备注',
            dataIndex: 'operateRemark',
            key: 'operateRemark',
            render: (text, record) => {
                const { operateRemark, operateCode } = record;
                const vo = operateRemark && JSON.parse(operateRemark);
                const m = MODALS[operateCode];
                return (
                    !!vo &&
                    !!m && (
                        <span
                            title="查看详情"
                            style={{ color: '#ffa808', cursor: 'pointer' }}
                            onClick={async () => {
                                if (loading) return;
                                setLoading(true);
                                try {
                                    await m(urlQuery.id, record.id);
                                } catch (e) {
                                    console.error(e);
                                } finally {
                                    setLoading(false);
                                }
                            }}
                        >
                            查看详情
                        </span>
                    )
                );
            }
        }
    ];
    const fetchSubtask = async () => {
        setLoading(true);
        const params = {
            id: urlQuery.id
        };
        const result = await getCycles(params);

        if (result.code === 10000) {
            const { data = {} } = result;
            const { planStartTime, actualStartTime, actualEndTime, planEndTime, cancelTime, operateRecordList } = data;
            setRecordList(operateRecordList || []);

            setStepObj({
                planStartTime,
                planEndTime,
                actualStartTime,
                actualEndTime,
                cancelTime
            });
        } else {
            message.error(result.msg);
        }
        setLoading(false);
    };

    useEffect(() => {
        if (activeKey === 'executionCycle') {
            fetchSubtask();
        }
    }, [activeKey, refreshComp]);

    return (
        <Row gutter={24}>
            <Col span={16} offset={4} style={{ padding: '0 0 20px 0' }}>
                <ExecuteSteps {...stepObj} />
            </Col>
            <Table
                loading={loading}
                defaultExpandAllRows
                columns={columns}
                rowKey="id"
                scroll={{ x: 'max-content' }}
                dataSource={recordList}
                pagination={false}
            />
        </Row>
    );
};

export default ExecutionCycle;
